<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
    <link href="/lib/vuetify/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    {{#if debug}}<script>{{ '/js/hot-loader.js' | includeFile }}</script>{{/if}}
</head>
<body>
<div id="app">
    <v-app>
        <template>
            <v-toolbar dark color="grey darken-3">
                <v-toolbar-side-icon></v-toolbar-side-icon>
                <v-toolbar-title>
                    <v-btn flat x-large href="/">My App</v-btn>
                </v-toolbar-title>
                <v-spacer></v-spacer>
                <v-toolbar-items class="hidden-sm-and-down">
                    <v-btn flat href="/validation/vuetify/">Home</v-btn>
                    <v-btn flat href="/validation/vuetify/login">Sign In</v-btn>
                    <v-btn flat href="/validation/vuetify/register">Register</v-btn>
                    <v-btn flat href="/validation/vuetify/contacts/">Contacts</v-btn>
                </v-toolbar-items>
            </v-toolbar>
        </template>
        <v-content>
            <v-container>

                {{ page }}

            </v-container>
        </v-content>
    </v-app>
</div>

<script>
    var exports = window;
    var IMPORT = { 
        jquery: '$',
        vue: function(){ 
            var e = require('Vue'); 
            e.Vue = e; // workaround TypeScript not allowing default imports  
            return e; 
        } 
    };
    window.require = function(name) {
        var w = IMPORT[name];
        if (w) return typeof w == "function" ? w() : typeof w == 'string' ? exports[w] : w;
        return exports[name] || exports;
    };
</script>


    {{#if !debug}}
    <script src="/lib/vue/dist/vue.js"></script>
    <script src="/lib/vuetify/dist/vuetify.js"></script>
    <script src="/lib/@servicestack/client/index.js"></script>
    <script src="/dtos.js"></script>
    <script src="/validation/vuetify/shared.js"></script>
    {{else}}
        {{ ['/lib/vue/dist/vue.js',
            '/lib/vuetify/dist/vuetify.js',
            '/lib/@servicestack/client/index.js',
            '/dtos.js',
            '/validation/vuetify/shared.js',
            ] | bundleJs({ out: '/validation/vuetify/bundle.js' }) }}
    {{/if}}


<script>
    Vue.use(Vuetify);
</script>

{{ scripts ?? `<script>new Vue({ el: '#app' })</script>` | raw }}

</body>
</html>